<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      header {
        width: 375px;
        height: 50px;
        background-color: #e54847;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <!-- 具名插槽,插入的时候有多个内容，要显示在不同的地方 -->
    <div id="app">
      <h2>具名插槽</h2>
      <my-header>
        <!-- <span>123</span>
        <span>#</span> -->

        <template #default>
          <span>!!!!!</span>
          <span>???</span>
        </template>

        <template #abc>
          <span>123</span>
        </template>
        <template #fuhao>
          <span>#</span>
        </template>

        <!-- <template v-slot:default>
          <span>???</span>
        </template> -->
      </my-header>

      <!-- <van-grid-item>
        <template #icon>
          <img src="" alt="">
        </template>
        <template #text>
          <span style="">文字</span>
        </template>
      </van-grid-item> -->
    </div>

    <script src="../Vue.js"></script>
    <script>
      const MyHeader = {
        template: `
          <header>
            <slot name="abc"></slot>
            猫眼电影
            <slot name="fuhao"></slot>
            <slot></slot>
          </header>
        `,
      };
      new Vue({
        el: "#app",
        data: {},
        components: {
          MyHeader,
        },
      });
    </script>
  </body>
</html>
